<template>
  <div class="info-container layout-padding">
    <div class="info-search">
      <el-row :gutter="35">
        <el-col :xs="16" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item prop="name" label="姓名">
            <el-input v-model="state.form.employeeName" style="width: 70%" clearable placeholder="请输入姓名"
              class="input-with-select">
              <template #append>
                <el-button :icon="Search" @click="handleSearch" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item>
            <el-radio-group v-model="state.radio1">
              <el-radio-button :label="1">区域1</el-radio-button>
              <el-radio-button :label="2">区域2</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item>
            <el-button type="primary" @click='handldDownload' style="margin-right: 5px;">下载模版</el-button>
            <el-upload :show-file-list="false" :before-upload="handldImport">
              <el-button type="primary">
                上传座位表
              </el-button>
            </el-upload>
            <el-button type="primary" @click='handleBack' style="margin-left: 5px;">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="info-main">
      <div class="main-tree">
        <!-- <el-tree :data="state.orgTree" :props="{ label: 'name', key: 'code', children: 'children' }" show-checkbox /> -->
        <fast-tree-component :treeData="state.treeData" :treeProps="treeProps" :showEdit=false :showSwitch=false
          @selectedCode="selectedCode"></fast-tree-component>
      </div>
      <div class="main-org">
        <div class="item" v-for="(item, index) in state.employeeData">
          <div class="info">工号：{{ item.code }}</div>
          <div class="info">姓名：{{ item.name }}</div>
        </div>
        <div v-if="state.employeeData.length === 0">暂无数据</div>
      </div>
      <div class="main-content">
        <div class="item" v-if="state.radio1 === 1" v-for="(item, colIndex) in 144" :key="colIndex">
          <div class="info">{{ state.leftMap.get(getRow(item) + '_' + getCol(item))?.name }}</div>
          <div class="info">{{ state.leftMap.get(getRow(item) + '_' + getCol(item))?.orgName }}</div>
        </div>

        <div class="item" v-if="state.radio1 === 2" v-for="(item, colIndex) in 144" :key="colIndex">
          <div class="info">{{ state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.name }}</div>
          <div class="info">{{ state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.orgName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, defineAsyncComponent, provide, onMounted, onUpdated } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { downloadFile } from '/@/utils/downloadFile';
import { myUploadFile } from './uploadFile';
import { useMeetingInfoQueryApi } from '/@/api/meeting/info';
import { usePersonOrgTreeApi } from '/@/api/person/org';
import { usePersonEmployeeFindOrgApi, usePersonEmployeePageApi } from '/@/api/person/employee';
import axios from 'axios';
import { Session } from '/@/utils/storage';
import { ElMessage } from 'element-plus';

const fastTreeComponent = defineAsyncComponent(() => import('/@/views/person/employee/fastTree/index.vue'));
const router = useRouter()

const treeProps = {
  label: 'name',
  key: 'code',
  children: 'children'
}
const state = reactive({
  baseUrl: import.meta.env.VITE_API_URL,
  radio1: 1,
  lable1: '区域1',
  lable2: '区域2',
  list: [
    {
      row: 1,
      col: 1,
      name: '658678',
      code: '',
    },
    {
      row: 1,
      col: 2,
      name: '67967',
      code: '',
    },
    {
      row: 1,
      col: 3,
      name: '346765',
      code: '',
    },
    {
      row: 1,
      col: 4,
      name: '56756',
      code: '',
    },
    {
      row: 1,
      col: 5,
      name: '46756',
      code: '',
    },
    {
      row: 1,
      col: 6,
      name: '567567',
      code: '',
    },
    {
      row: 1,
      col: 7,
      name: '6798',
      code: '',
    },
    {
      row: 1,
      col: 8,
      name: '2355674',
      code: ''
    },
    {
      row: 1,
      col: 9,
      name: '457567',
      code: ''
    },
    {
      row: 1,
      col: 10,
      name: '456456',
      code: ''
    },
    {
      row: 1,
      col: 11,
      name: '4575467',
      code: ''
    },
    {
      row: 1,
      col: 12,
      name: '345546',
      code: ''
    },
    {
      row: 1,
      col: 13,
      name: '345345',
      code: ''
    },
    {
      row: 1,
      col: 14,
      name: '234234',
      code: ''
    },
    {
      row: 1,
      col: 15,
      name: '11123',
      code: ''
    }, {
      row: 1,
      col: 16,
      name: '9999',
      code: ''

    }, {
      row: 1,
      col: 17,
      name: '8888',
      code: ''
    },
    {
      row: 1,
      col: 19,
      name: '777',
      code: ''

    },
    {
      row: 1,
      col: 18,
      name: '666',
      code: ''
    },
    {
      row: 1,
      col: 20,
      name: '555',
      code: ''
    },
    {
      row: 1,
      col: 21,
      name: '444',
      code: ''
    },
    {
      row: 1,
      col: 24,
      name: '333',
      code: ''

    },
    {
      row: 1,
      col: 23,
      name: '222',
      code: ''
    },
    {
      row: 1,
      col: 22,
      name: '111',
      code: ''
    },
    {
      row: 2,
      col: 1,
      name: '111',
      code: ''
    },
    {
      row: 2,
      col: 2,
      name: '111',
      code: ''
    },
    {
      row: 2,
      col: 3,
      name: '111',
      code: ''
    },
    {
      row: 6,
      col: 12,
      name: 'ppp',
      code: ''
    }
  ],
  left: [],
  right: [],
  leftMap: new Map(),
  rightMap: new Map(),
  treeData: [],
  employeeData: [],
  form: {
    code: 'a168ebdb-9789-4662-80b3-7ddd35ef5b0a',
    codeList: [],
    employeeName: ''
  }
})

// 主页面获取树状菜单
const getTreeMenus = () => {
  usePersonOrgTreeApi("").then(({ content }) => {
    state.treeData = content
  })
}
provide('getTreeMenus', getTreeMenus)

// 页面加载时
onMounted(() => {
  getSeatInfo();
  getTreeMenus();
});

const getRow = (index: any) => {
  if (parseInt(index / 12) === 1 && index <= 12) return parseInt(index / 12)

  if (parseInt(index % 12) === 0) {
    return parseInt(index / 12)
  }
  return parseInt(index / 12) + 1
}

const getCol = (index: any) => {
  if (index % 12 === 0) return 12
  return index % 12
}


const getrightCol = (index: any) => {
  if (index % 24 === 0) return 24
  return (index % 24) + 12
}

const handleBack = () => {
  router.replace('/meeting/meeting')
}

const handldDownload = () => {
  downloadFile('GET', `${state.baseUrl}v0/meeting/employee/template`, null, '座位模版')
}

// 勾选关联查询table
const selectedCode = (data: any) => {
  state.form.codeList = data
  getTableData()
}

const handldImport = (file: any) => {
  // myUploadFile(file, `${state.baseUrl}v0/meeting/employee/import?code=a168ebdb-9789-4662-80b3-7ddd35ef5b0a`, 'file', '上传成功', getSeatInfo())
  const formData = new FormData();
  formData.append("file", file);
  axios.post(`${state.baseUrl}v0/meeting/employee/import?code=a168ebdb-9789-4662-80b3-7ddd35ef5b0a`, formData, {
    headers: {
      'X-Token': Session.get('token'),
    },
  })
    .then((res) => {
      // 上传成功后的处理
      ElMessage.success('上传成功');
      getSeatInfo()
    });
}

const handleSearch = () => {
  getTableData()
}

// 初始化列表数据
const getTableData = () => {
  usePersonEmployeeFindOrgApi(state.form).then(({ content }) => {
    console.log(content);

    state.employeeData = content || []
  })
};

const getSeatInfo = () => {
  useMeetingInfoQueryApi('a168ebdb-9789-4662-80b3-7ddd35ef5b0a').then(({ content }) => {
    console.log('调用');
    state.leftMap.clear()
    state.rightMap.clear()
    state.left = content.filter((item) => {
      return item.col <= 12
    })
    state.right = content.filter((item) => {
      return item.col > 12
    })
    state.left.forEach((item) => {
      state.leftMap.set(item.row + '_' + item.col, item)
    })
    state.right.forEach((item) => {
      state.rightMap.set(item.row + '_' + item.col, item)
    })
    console.log(state.leftMap);
    console.log(state.rightMap);
  })
}
</script>
<style scoped lang='scss'>
.info-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;

  :deep(.el-form-item--large) {
    margin-bottom: 0;
    margin-bottom: 10px;
  }

  .info-main {
    background: #fff;
    display: flex;
    height: calc(100% - 55px);

    .main-tree {
      flex: 1;
      padding: 10px;

      overflow: scroll;
    }

    .main-org {
      flex: 1;
      padding: 10px;
      border: 1px solid #a0a0a0;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: scroll;

      .item {
        width: 100%;
        border: 1px solid #a0a0a0;
        padding: 5px;
        margin-bottom: 5px;
      }
    }

    .main-content {
      flex: 6;

      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: start;


      .item {
        width: calc(100% / 12.5);
        height: calc(100% / 13);
        margin-bottom: 5px;
        font-size: 12px;
        padding: 4px 0 0 6px;
        border-radius: 2px;
        box-sizing: border-box;

        .info {
          margin-top: 4px;
        }
      }

      .item:nth-child(-n+24) {
        background-color: #81D3F8;
      }

      .item:nth-child(n+25):nth-child(-n+48) {
        background-color: #C7F681;
      }

      .item:nth-child(n+49):nth-child(-n+72) {
        background-color: #EC808D;
      }

      .item:nth-child(n+73):nth-child(-n+96) {
        background-color: #FBCD90;
      }

      .item:nth-child(n+97):nth-child(-n+120) {
        background-color: #D8BFF2;
      }

      .item:nth-child(n+121):nth-child(-n+144) {

        background-color: #80FFC3;
      }

    }
  }
}
</style>